<template>
	<view class="address-page">
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content">收货地址</block>
		</bar-title>
		
		
		
		<view class="address-list" >
			
			<empty v-if=" empty === true && addressList.length === 0"
			></empty>
			
			<view class="address-item solid-bottom"
				v-for="(item, index) of addressList" :key="index" 
				@click="checkAddress(item)"
			>
				<view class="inner">
					<view class="info-box">
						<text v-if="item.isDefault" class="cu-tag sm line-red margin-right-xs">默认</text>
						<text class="name margin-right-sm">{{item.postalName}}</text>
						<text class="mobile">{{item.phone}}</text>
					</view>
					<text class="address">收货地址：{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</text>
				</view>
				<view class="edit"  @click.stop="addAddress('edit', item)">
					<text class="cuIcon-edit"></text>
				</view>
				
			</view>
			
		</view>
		
		<!-- 底部 -->
		<view class="cu-bar tabbar bg-white shadow foot" >
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-cyan shadow-blur round lg"
					@click="addAddress('add')"
				>+ 新增地址</button>
			</view>
		</view>
		
	</view>
</template>

<script>
import empty from "@/components/basics/empty.vue";
import { Address } from '@/models/address.js';
let address = new Address()
export default {
	components: {
		empty
	},
	data() {
		return {
			source: 0,
			empty: false,
			addressList: []
		}
	},
	onLoad(option){
		if(option && option.source) {
			this.source = option.source;
		}
		// this.getAllAddress()
	},
	onShow() {
		this.getAllAddress()
	},
	methods: {
		async getAllAddress() {
			this.addressList = await address.getAll()
			this.empty =  !this.addressList.length
		},
				
		//选择地址
		checkAddress(item){
			if(this.source == 1){
				this.$store.commit('setStateAttr', {
					key: 'selectAddress',
					val: item
				}) 
				uni.navigateBack()
			}
		},
		addAddress(type, item){
			this.$jumpPages('createAddress', {
				type,
				data: JSON.stringify(item)
			})
		},
	}
}
</script>

<style lang='scss' scoped>
.address-page{
	padding-bottom: 120rpx;
	position: relative;
}
.address-item{
	display: flex;
	align-items: center;
	padding: 24rpx 32rpx 20rpx 32rpx;
	background: #fff;
	position: relative;
	line-height: 1;
	.inner{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	
	.info-box{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
	}
	.edit{
		width: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 36rpx;
	}
	.address{
		margin-top: 20rpx;
		color: #333333;
		font-size: 24rpx;
		line-height: 42rpx;
	}
	.icon-bianji{
		display: flex;
		align-items: center;
		height: 80rpx;
		font-size: 40rpx;
		color: $font-color-light;
		padding-left: 30rpx;
	}
}

</style>
